iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
1
Modern Web

從零開始的網頁設計系列 第 2

Day02 : 基本 html 架構

  • 分享至 

  • xImage
  •  

每一天都會配合一個實例去做簡單的教學

好,那html到底是什麼? 我想要是我開始落落長的說明他大家就會想把網頁關掉了吧
簡單地講,我們要讓預覽器看得懂我們在做什麼就需要他(太含糊了吧
讓我們還看看維基百科好了
那我們知道通常在寫網站不外乎基本的就是 HTML5 CSS3 JavaScript 這三位大大了對吧
這時就頭痛了,我的媽啊,我寫個網站居然要一次學三個東西?!

既然都說是從零了,當然我們會一步步去搭一個網站啦!從最簡單只有html搭配css三的網站開始慢慢到增加js
那我簡單做的說明這三者的關係

如果我們用房子還形容的話

  • html就像是這間房子的骨架,鋼筋水凝,我們將 < > 框起來的東西 叫做標籤
    那會有起始標籤以及結束標籤 <html> : 起始標籤 </html> : 結束標籤
  • CSS3則是我們房子的外觀裝潢,讓我們的房子(網站)變得漂亮的關鍵
    由於我的工作上都是已攥寫CSS為重所以在本系列中可能會在CSS的部分講的比較詳細
  • Javascript 賦予我們房子生命就如同你的房子要有傢俱才會有功能,有了JS你可以任意的改變你整個html
    他真是一位令人深深著迷又危險的姑娘

那我們今天就先來建一個擁有基本html架構的網站吧!

1.建立index.html

  • 檔案 > 新增檔案
    這邊的資料夾是我事先建立好的
    https://ithelp.ithome.com.tw/upload/images/20171215/20104423wAMeBkZGAy.png

  • 檔案 > 儲存
    將檔案命名為 index.html
    https://ithelp.ithome.com.tw/upload/images/20171216/20104423Io7HpoJ7Jr.png

那也可以直接從上圖中我框起來的部分去做新增檔案或是新增資料夾的動作

2.開始撰寫html
這邊的話我有裝一個html的套件方便我寫標籤
而大家可以去搜尋看看關於Emmet的用法,必裝好用的套件
如果你是使用Sublime Text或者是Atom的話 要使用Emmet的話則需要另外去安裝Emmet的套件
HTML Snippets
那這邊我們就先下基本的html標籤
先打html後下方會出現很多的補字
我這邊是選html:5 這是內建的Emmet套件
https://ithelp.ithome.com.tw/upload/images/20171216/20104423CEXWae3V2z.png

按下Enter後會出現

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
 </head>
 <body>
 </body>
 </html>

我們先略過這一段

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!DOCTYPE html>
一定會在html檔案的的第一行,在<html>標籤前面,但他不是html標籤,他是瀏覽器要使用哪個版本的html進行編寫的指令


<html> </html>
包裹我們整個網頁的重要標籤,有始起標籤也有結束的標籤


<head> </head>
包在 html標籤裡,因為他都放在最上方所以叫head 標籤之間就可以用來放很多網頁資訊,比如給瀏覽器看得或者是導入檔案,最常見的不外乎就是<link> <style> <script> <meta>


<title></title>是我們網站的名字,也就是你在標籤頁上看到的網站名稱


<body> </body>
都直接叫身體了,就是我們網站想要顯示的內容都會放在body

3.不免俗的來一下 Hello World!
<body></body> 直接打上 Hello World!

<body>
Hello World!
</body>

https://ithelp.ithome.com.tw/upload/images/20171216/20104423QbtCW3ejeL.png

好,今天就先到這邊,明天就會開始分享其他的常用標籤!


想到就更新專業 樂樂
有任何問題都歡迎一起提出來討論>_O


上一篇
Day01 : 開始之前..Visual Studio Code 簡易功能說明
下一篇
Day03 : 常用標籤(一) 標題標籤、段落標籤
系列文
從零開始的網頁設計22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言